<template>
  <div class="turntable-box">
    <van-nav-bar
      title="大转盘"
      left-arrow
      @click="router.push('/healthyDetails')"
    />
    <div class="top">
      <nutbig-turntable
        class="turntable"
        ref="turntable"
        :width="luckWidth"
        :height="luckheight"
        :prize-list="prizeList"
        :turns-number="turnsNumber"
        :turns-time="turnsTime"
        :prize-index="prizeIndex"
        :style-opt="styleOpt"
        :pointer-style="pointerStyle"
        @start-turns="startTurns"
        @end-turns="endTurns"
      >
      </nutbig-turntable>
      <h2>活动规则</h2>
      <p>今日还有{{ num }}次机会</p>
      <span @click="showPop">我的中奖记录</span>
    </div>
    <div class="bottom">
      <div class="menu">
        <h2>问诊抵扣 <span>最高抵扣 <b>20%</b></span></h2>
        <dl>
          <dt>
            <img src="../../image/a22.png" alt="" />
          </dt>
          <dd>
            <b>快速问诊</b>
          </dd>
          <dd class="d1">
            三家专家/<span>3分钟</span>接诊
          </dd>
        </dl>
        <dl>
          <dt>
            <img src="../../image/a23.png" alt="" />
          </dt>
          <dd>
            <b>专家问诊</b>
          </dd>
          <dd class="d1">
            <span>32万</span>医生在线
          </dd>
        </dl>
        <dl>
          <dt>
            <img src="../../image/a24.png" alt="" />
          </dt>
          <dd>
            <b>一病多问</b>
          </dd>
          <dd class="d1">
            一次看<span>5位</span>专家
          </dd>
        </dl>
      </div>
      <div class="box">
        <h2>问诊券兑换</h2>
        <dl>
          <dt>
            <img src="../../image/a25.png" alt="" />
          </dt>
          <dd>85折专家问诊券</dd>
          <dd class="d2">200</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../image/a26.png" alt="" />
          </dt>
          <dd>快速问诊85折券</dd>
          <dd class="d2">200</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../image/a27.png" alt="" />
          </dt>
          <dd>一病多问问诊85...</dd>
          <dd class="d2">200</dd>
        </dl>
        <img src="../../image/a28.png" alt="" class="img1">
        <img src="../../image/a28.png" alt="" class="img2">
        <img src="../../image/a28.png" alt="" class="img3">
      </div>
    </div>
  </div>
  <van-popup v-model:show="show">
    <div class="imag">
      <img src="../../image/a29.png" alt="" />
    </div>
    <div v-for="(item, index) in arr" :key="index" class="record-item">
      <span>{{ item.prizeName }}</span>
      <img :src="item.prizeImg" alt="" />
    </div>
    <button class="btn" @click="ok">我知道了</button>
  </van-popup>
</template>

<script>
import { Toast } from "@nutui/nutui";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from 'vant';
export default {
  setup() {
    const canSpin = ref(true);
    // 返回上一页
    const router = useRouter();
    const show = ref(false);
    const showPop = () => {
      show.value = true;
    };
    const ok = () => {
      show.value = false;
    };
    const arr = ref([]);
    const turntable = ref(null);
    // 转盘大小
    const luckWidth = ref("300px");
    const luckheight = ref("300px");
    // 转盘指针图片样式
    const pointerStyle = {
      width: "80px",
      height: "80px",
      backgroundImage:
        'url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")',
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
    };
    // 转盘上要展示的奖品数据
    const prizeList = ref([
      {
        id: "xiaomi",
        prizeName: "小米手机",
        prizeImg:
          "https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png",
      },
      {
        id: "blue",
        prizeColor: "rgb(251, 219, 216)",
        prizeName: "蓝牙耳机",
        prizeImg:
          "https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg",
      },
      {
        id: "apple",
        prizeName: "apple watch",
        prizeImg:
          "https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png",
      },
      {
        id: "fruit",
        prizeColor: "rgba(246, 142, 46, 0.5)",
        prizeName: "迪士尼苹果",
        prizeImg:
          "https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png",
      },
      {
        id: "fish",
        prizeName: "海鲜套餐",
        prizeImg:
          "https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png",
      },
      {
        id: "thanks",
        prizeName: "谢谢参与",
        prizeImg:
          "https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png",
      },
    ]);
    // 转动圈数
    const turnsNumber = ref(5);
    // 转动需要持续的时间(秒)
    const turnsTime = ref(5);
    // 转盘样式的选项
    const styleOpt = reactive({
      // 转盘中每一块扇形的背景色，根据奖品的index来取每一块的对应颜色
      prizeBgColors: [
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
        "rgb(255, 231, 149)",
        "rgb(255, 247, 223)",
      ],
      // 每一个扇形的外边框颜色
      borderColor: "#ff9800",
    });
    // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
    const prizeIndex = ref(-1);
    // 剩余抽奖次数
    const num = ref(5);

    const startTurns = () => {
       if (!canSpin.value) {
        showFailToast('您今天已经没有转动机会了！');
    return; // 直接返回，不执行转动
  }
      const index = Math.floor(Math.random() * prizeList.value.length);
      prizeIndex.value = index;
      turntable.value.rotateTurn();
    };

   const endTurns = () => {
  // 先获取中奖的奖品数据并添加到中奖记录数组
  const winningPrize = prizeList.value[prizeIndex.value];
  console.log("中奖了，奖品信息如下：");
  console.log(winningPrize);
  arr.value.push(winningPrize);
  console.log(arr.value);

  num.value--;
  if (num.value <= 0) {
     canSpin.value = false;
  }
};

    return {
      turntable,
      luckWidth,
      luckheight,
      pointerStyle,
      prizeList,
      turnsNumber,
      turnsTime,
      styleOpt,
      prizeIndex,
      num,
      startTurns,
      endTurns,
      router,
      show,
      showPop,
      ok,
      arr
    };
  }
};
</script>

<style scoped>
.turntable-box {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
}
.top {
  width: 100%;
  height: 5rem;
  background: aqua;
  position: relative;
}
.turntable {
  position: absolute;
  top: 3.1rem;
}
.top h2 {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  color: orange;
}
.top p {
  position: absolute;
  right: 0.1rem;
  top: 0.5rem;
  font-size: 0.15rem;
  color: #fff;
}
.top span {
  width: 1.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  background: orange;
  color: #fff;
  position: absolute;
  top: 0.85rem;
  right: 0rem;
  font-size: 0.15rem;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem 0 0 0.5rem;
}
.bottom {
  width: 100%;
  height: 100%;
}
.menu {
  width: 3.5rem;
  height: 1.5rem;
  background: #fcfcfc;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}
.menu h2 {
  font-weight: normal;
}
.menu span {
  font-size: 0.12rem;
  font-weight: normal;
  color: #a5a8b6;
  z-index: 1;
}
.menu h2 span b {
  color: red;
  font-weight: bold;
  z-index: 1;
}
.menu dl {
  width: 1rem;
  height: 1rem;
  float: left;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}
.menu dt {
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 50%;
  margin-left: 0.25rem;
  margin-top: 0.1rem;
}
.menu dt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.menu dd {
  width: 1rem;
  text-align: center;
  font-size: 0.1rem;
  z-index: 1;
  margin-top: 0.01rem;
}
.menu b {
  color: #000;
}
.menu.dl {
  font-size: 0.1rem;
  color: #d9d9dd;
}
.menu.d1 span {
  color: #ff6e41;
}
.box {
  width: 3.5rem;
  height: 2rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  position: relative;
}
.box dl {
  width: 1rem;
  height: 1.5rem;
  float: left;
  margin-left: 0.12rem;
  margin-top: 0.1rem;
}
.box dt {
  width: 1rem;
  height: 0.8rem;
}
.box dt img {
  width: 100%;
  height: 100%;
}
.box dd {
  width: 100%;
  margin-top: 0.2rem;
  font-size: 0.12rem;
  text-align: center;
}
.box.d2 {
  color: #deb878;
  margin-top: 0.1rem;
  margin-left: 0.1rem;
}
.img1 {
  position: absolute;
  left: 0.35rem;
  bottom: 0.17rem;
}
.img2 {
  position: absolute;
  left: 1.45rem;
  bottom: 0.17rem;
}
.img3 {
  position: absolute;
  right: 0.75rem;
  bottom: 0.17rem;
}
.van-popup {
  width: 3rem;
  height: 4.5rem;
  border-radius: 0.1rem;
}
.imag {
  width: 100%;
  height: 1.5rem;
  background: blue;
  z-index: 1;
}
.imag img {
  width: 100%;
  height: 100%;
}
.btn {
  width: 2.5rem;
  height: 0.5rem;
  background: skyblue;
  color: #fff;
  position: absolute;
  bottom: 0.1rem;
  left: 0.25rem;
  border: none;
  border-radius: 0.5rem;
}
.record-item {
  width: 100%;
  height: .4rem;
  border-bottom: 1px solid #ccc;
}
.record-item p{
    border-bottom: .1rem solid #ccc;
}
.prize-name {
  font-size: 14px;
  font-weight: bold;
}
.record-item img{
    width: 0.35rem;
    height: 0.35rem;
    margin-left: .2rem;
}
</style>